<template>
  <div>
    <!-- 可编辑带预览 -->
    <template v-if="!readonly">
      <el-upload
        class="upload-demo"
        name="uploadFile"
        :action="url"
        :headers="headers"
        :data="data"
        :accept="accept"
        :on-change="handleChange"
        :on-success="handleSuccess"
        :on-remove="handleRemove"
        :drag="isDrag"
        :limit="limit"
        :on-exceed="onExceed"
        :on-preview="onPreview"
        :file-list="fileList"
        :list-type="listType"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <template #tip>
          <div class="el-upload__tip" v-if="showTip">
            {{ `只能上传${accept}文件, 且不超过500MB` }}
          </div>
        </template>
      </el-upload>
      <!-- 图片预览容器 -->
      <el-image
        ref="imgPreview"
        style="width: 0; height: 0; opacity: 0"
        :src="previewUrl"
        fit="cover"
        :preview-src-list="[previewUrl]"
      ></el-image>
    </template>
    <!-- 纯预览 -->
    <template v-else>
      <div class="enclosure">
        <el-tooltip
          effect="dark"
          :content="item.name"
          placement="top"
          v-for="(item, index) in fileList"
          :key="index"
        >
          <div class="enclosure-item">
            <img
              src="@/assets/images/word.webp"
              v-if="item.name.indexOf('.doc') > -1"
              alt=""
              @click="downloadFn(item.url)"
            />
            <img
              src="@/assets/images/excel.webp"
              v-else-if="item.name.indexOf('.xls') > -1"
              alt=""
              @click="downloadFn(item.url)"
            />
            <img
              src="@/assets/images/pdf.webp"
              v-else-if="item.name.indexOf('.pdf') > -1"
              alt=""
              @click="downloadFn(item.url)"
            />
            <el-image
              v-else
              :src="item.url"
              fit="cover"
              :preview-src-list="[item.url]"
            ></el-image>
            <div class="enclosure-name">{{ item.name }}</div>
          </div>
        </el-tooltip>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
// import requestUrl from "@/core/http/requestUrl";
// import { getToken, objectToQueryString } from "@/utils";
const imgArr = [".jpg", ".jpeg", ".png"];
const defaultAccept = ".jpg, .jpeg, .png, .txt, .pdf, .doc, .docx, .xls, .xlsx";
const props = defineProps({
    accept: {
      type: String,
      default: defaultAccept
    },
    limit: {
      type: Number,
      default: 1
    },
    value: {
      type: Array,
      default: () => []
    },
    listType: {
      type: String,
      default: 'text'
    },
    isDrag: {
      type: Boolean,
      default: false
    },
    showTip: {
      type: Boolean,
      default: true
    },
    // 是否为纯预览
    readonly: {
      type: Boolean,
      default: false
    },
    // 模块区分
    // 1-项目；2-合同
    fielState: {
      type: String,
      default: '1'
    },
    // id: 个模块id
    id: {
      type: String,
      default: ''
    }
});

// 预览
const onPreview = () => {};

// 获取纯预览的list数据
const getStaticPreviewUrl = () => {};

//获取预览url
const getPreviewUrl = () => {};

// 下载文件
const downloadFn = () => {};

// 超出限制
const onExceed = () => {};

// 文件change函数
const handleChange = () => {};

//  上传文件-成功
const handleSuccess = () => {};
//  上传文件-成功
const handleRemove = () => {};
</script>
<style lang="scss" scoped>
.el-upload__tip {
  position: relative;
  left: 8px;
  top: 8px;
  display: inline;
}
.enclosure {
  display: flex;
  flex-wrap: wrap;
  .enclosure-item {
    flex-shrink: 0;
    width: 80px;
    margin-right: 20px;
    margin-bottom: 15px;
    img {
      width: 50px;
      height: 50px;
      object-fit: cover;
      margin: 0 auto;
      display: block;
    }
    .enclosure-name {
      width: 100%;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
